<template>
  <div id="employees">
    <div class="employees-header">
      <el-button type="primary" @click="addemployees">添加</el-button>
      <el-input v-model="input" placeholder="请输入内容" clearable />
      <el-button type="primary" icon="el-icon-search" @click="queryemployees">查询</el-button>
    </div>
    <div class="employees-main">
      <el-table
        :data="employeeList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="编号"
          align="center"
        />
        <el-table-column
          prop="realname"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="telephone"
          label="手机号"
          align="center"
        />
        <el-table-column
          prop="idCard"
          label="身份证号"
          align="center"
        />
        <el-table-column
          prop="bankCard"
          label="银行卡号"
          align="center"
        />
        <el-table-column
          prop="registerTime"
          label="注册时间"
          align="center"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="deleteemployee(scope.row.id)">删除</el-button>
            <el-button type="text" @click="editoremployee(scope.row)">编辑</el-button>
            <el-button type="text" @click="employeesdetails(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="employees-footer">
      <div class="block">
        <el-pagination
          :current-page.sync="currentPage1"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/删除的模态框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" top="8vh">
      <el-form ref="myform" :model="form" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="realname">
          <el-input v-model="form.realname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="telephone">
          <el-input v-model="form.telephone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idCard">
          <el-input v-model="form.idCard" autocomplete="off" />
        </el-form-item>
        <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="backCard">
          <el-input v-model="form.backCard" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" autocomplete="off" show-password />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('myform')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import qs from 'querystring'

export default {
  data() {
    return {
      input: '',
      employees: [],
      currentPage1: 1,
      pageSize: 6,
      total: 0,
      dataShow: [], // 当前显示的数据
      pageNum: 1, // 共有几页
      totalPage: [], // 所有页面的数据
      // 模态框
      tital: '添加员工信息',
      dialogFormVisible: false,
      form: {
        username: '',
        realname: '',
        telephone: '',
        idCard: '',
        delivery: false,
        bankCard: '',
        password: ''
      },
      formLabelWidth: '120px',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 10, max: 20, message: '长度在 10 到 20 个字符', trigger: 'blur' }
        ],
        backCard: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          { min: 10, max: 25, message: '长度在 10 到 25 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      }

    }
  },

  computed: {
    employeeList() {
      // return this.employees.slice(4,10);
      var self = this
      // for(let i = 0;i<self.total;i++){
      //   this.data.push = self.employees;
      // }
      // 根据后台数据的条数和每一页显示数据算出一共几页，得0时设为1；
      this.pageNum = Math.ceil(self.total / self.pageSize) || 1
      // console.log(this.pageNum,'09090');
      // 根据每页显示的数量，将后台数据分割到每一页中
      for (let i = 0; i < this.pageNum; i++) {
        this.totalPage[i] = this.employees.slice(self.pageSize * i, self.pageSize * (i + 1))
      }
      //  获取到数据后显示的第一页内容
      this.dataShow = this.totalPage[self.currentPage1 - 1]
      //  console.log(this.dataShow,'23423');
      return this.dataShow
    },
    // 设置下一页
    nextPage() {
      if (this.currentPage1 === this.pageNum - 1) return
      this.dataShow = this.totalPage[++this.currentPage1]
    },
    //  设置上一页
    prePage() {
      if (this.currentPage1 === 0) return
      this.dataShow = this.totalPage[--this.currentPage1]
    }
  },
  created() {
    this.findAllemployees()
  },
  methods: {
    // 给详情按钮添加事件
    employeesdetails(id) {
      this.$router.push({ path: '/employeesdetails/employeesdetails', query: { id: id }})
    },

    // 给编辑按钮添加事件
    editoremployee(row) {
      this.dialogFormVisible = true
      this.title = '修改员工信息'
      this.form = {
        id: row.id,
        username: row.username,
        realname: row.realname,
        telephone: row.telephone,
        idCard: row.idCard,
        bankCard: row.backCard,
        password: row.password
      }
    },

    // 给删除按钮添加事件
    deleteemployee(id) {
      var id = id
      var self = this
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/waiter/deleteById', { params: { id }}).then(response => {
          if (response.data.status == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message.error('错了哦，删除失败消息！')
          }
          self.findAllemployees()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    //  给查询按钮添加事件
    queryemployees() {
      // console.log(this.input);
      var id = this.input
      this.$axios.get('/waiter/findWaiterById', { params: { id }}).then(response => {
        this.employeeId = response.data.data
        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
          dangerouslyUseHTMLString: true
        })
      })
    },

    // 给添加/编辑的模态框绑定事件
    submitForm(formName) {
      var self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          self.$axios.post('/waiter/saveOrUpdate', qs.stringify(self.form)).then(response => {
          //  console.log(response.data);
            this.$message({
              showClose: true,
              message: '恭喜你，成功添加了一条信息',
              type: 'success'
            })
            self.findAllemployees()
          })
        } else {
          this.$message({
            showClose: true,
            message: '错了哦，添加失败了',
            type: 'error'
          })
          console.log('error submit!!')
          return false
        }
        self.dialogFormVisible = false
      })
    },

    // 给添加按钮绑定事件
    addemployees() {
      this.dialogFormVisible = true
      this.title = '添加员工信息'
      this.form = {}
    },

    // 封装获取所有的员工信息
    findAllemployees() {
      //   var data ={
      //   page:1,
      //   pageSize:12
      // }
      this.$axios.get('/waiter/findAll').then(response => {
        console.log(response.data.data.length)
        this.employees = response.data.data
        this.total = response.data.data.length
      })
    },

    // 分页按钮
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.findAllemployees()
    }
  }
}
</script>
<style lang="scss" scoped>
#employees{
  padding: 20px;
  .employees-header :nth-child(2){
    width: 26%;
    margin-left: 20px;
  }
  .employees-header :nth-child(3){
    margin-left: 15px;
  }
}
</style>
